<script setup>
    import {onMounted, ref} from 'vue';
    import dateUtil from '@/utils/dateUtil';
    import chartApi from "@/api/chart.js";
    import * as echarts from 'echarts'


    const chartRef = ref()
    // 加载完成后再进行
    onMounted(()=>{
        const myChart = echarts.init(chartRef.value);
        const date = dateUtil.getMonthFistDay();
        const days = dateUtil.getMonthDays();

        chartApi.selectReserveCount(date).then(result => {
            const data = new Array(days.length).fill(0);

            for (let i=0; i<days.length; i++){
                for (let item of result.data){
                    if (item.day == days[i]) {
                        data[i] = item.count;
                    }
                }

                days[i] = days[i].substring(5);
            }

            let option = {
                title: {
                    text: '预约趋势',
                    textStyle: {
                        color: '#161D23',
                        fontWeight: 'bold',
                        fontSize: '16px',
                    },
                    left: '10px',
                    top: '10px',
                },
                grid: {
                    left: '3%',
                    right: '30px',
                    bottom: '3%',
                    top: '40px',
                    containLabel: true
                },
                tooltip: {},
                yAxis: {
                    type: 'value',
                    axisLabel: {color: '#FFF'},
                },
                xAxis: {
                    axisLabel: {color: '#161D23'},
                    type: 'category',
                    data: days,    // 替换成时间
                },
                series: [
                    {
                        name: '预约数量',
                        type: 'line',
                        smooth: true,
                        data: data,   // 显示数据
                        itemStyle: {
                            color: '#73C0DE',
                        },
                        barWidth: '50%',
                        label: {
                            show: true,
                            color: '#73C0DE',
                            position: 'top',
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }

            myChart.setOption(option);
        });

    });
</script>

<template>

<div ref="chartRef" style="width: 100%; height: 100%">
</div>

</template>

<style>

</style>